import React from 'react';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Input, Row, Col } from 'antd';

const FormItem = Form.Item;
class BasicForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      costCenterList: [
        {
          costCenterId: `list_0`,
          name: '',
        },
        {
          costCenterId: `list_1`,
          name: '',
        },
        {
          costCenterId: `list_2`,
          name: '',
        },
      ],
      listIndex: 3,
    };
  }

  // 新增数据
  add = () => {
    const { costCenterList, listIndex } = this.state;
    const newData = costCenterList.map(item => ({ ...item }));
    newData.push({
      costCenterId: `list_${listIndex}`,
      name: '',
    });
    this.state.listIndex += 1;
    this.setState({ costCenterList: newData });
  };

  // 删除数据
  delList = costCenterId => {
    const { costCenterList } = this.state;
    const newData = costCenterList.filter(item => item.costCenterId !== costCenterId);
    this.setState({ costCenterList: newData });
  };

  render() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    const { costCenterList } = this.state;
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };
    return (
      <Form layout="vertical">
        <Row gutter={64}>
          {costCenterList.map((item, index) => (
            <Col {...colProps} key={item.costCenterId ? item.costCenterId : index}>
              <FormItem>
                {getFieldDecorator(item.costCenterId ? item.costCenterId : `list_${index}`, {
                  rules: [{ required: true, message: '请输入的内容必须在1-50个字' }],
                })(<Input placeholder="请输入" style={{ width: '90%' }} maxLength={50} />)}
                <MinusCircleOutlined
                  className="dynamic-delete-button"
                  onClick={() => this.delList(item.costCenterId)} />
              </FormItem>
            </Col>
          ))}
        </Row>
        <Button
          style={{ width: '100%', marginBottom: 8 }}
          type="dashed"
          icon={<PlusOutlined />}
          onClick={this.add}
        >
          新增成本中心
        </Button>
      </Form>
    );
  }
}
const BasicFormList = Form.create()(BasicForm);
export default BasicFormList;
